<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js" type="text/javascript"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js" type="text/javascript"></script>
<style>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
</style>
</head>
<body>
<div><a href="#index">index</a><a href="#blog">blog</a></div>
<ul id="wrapper">

</ul>
<script>
(function ($) {
    // model for each article
    var Article = Backbone.Model.extend({});

    // collection for articles
    var ArticleCollection = Backbone.Collection.extend({
        model: Article
    });

    // view for index page
    var MainView = Backbone.View.extend({
        el: $('#wrapper'),
        render: function (){
            //var template = Handlebars.compile($("#main_hb").html());
            //$(this.el).find('#main_content').html(template);
            return this;            
        }   
    });

    // view for listing blog articles
    var ArticleListView = Backbone.View.extend({
        el: $('#wrapper'),
        render: function(){
            var js = this.model.toJSON();
            console.log(js);
            //var template = Handlebars.compile($("#articles_hb").html());
            //$(this.el).find('#main_content').html(template({articles: js}));
            return this;    
        }
    });

    // main app
    var ArticleApp = Backbone.Router.extend({
        // setup routes
        routes: {
            ""  : "index",
            "blog"  : "blog"
        },          
        index: function(){
            var main = new MainView({});
            main.render();
            return this;
        },          
        blog: function(){
			var data = {"name":"web", "job":"web developer"}
			var articles = new ArticleCollection(data);
			var view = new ArticleListView({model: articles});
			view.render();
            return this;
        }

    });

    // let's start the app!
    articleApp = new ArticleApp();
    Backbone.history.start();

})(jQuery);
</script>
</body>
</html>